<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ asset('css/font-awesome.min.css') }}" rel="stylesheet" />
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="{{ asset('js/jquery-1.8.3.min.js') }}" type="text/javascript"></script>
<link rel="stylesheet" href="{{URL::asset('./css/register.css')}}">
<link rel="stylesheet" href="{{URL::asset('./css/reset.css')}}">
<!-- <a><img src="{{URL::asset('./img/index/floor_tel.png')}}" alt=""><span> -->
<meta name="_token" content="{{csrf_token()}}">

<div class="loginBg" id="login">
    <div class="loginForm">
        <div class="loginMain">

            <div class="login_title">
                <img :src="overall.site_logo">
            </div>
            <div class="login_nav">
                <div :class='{active:activeBo==1}' @click="setActiveBo(1)">用户注册</div>
                <div :class='{active:activeBo==2}' @click="setActiveBo(2)">供应商注册</div>
            </div>
            <!-- 用户基本注册 -->
            <el-form v-show="activeBo==1 && next==1" :rules="rule1" :model="form" label-position="top" size="mini" ref="form">
                <el-form-item prop="tel" label="手机号">
                    <el-input v-model="form.tel"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="form.password" show-password></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="verifyPass">
                    <el-input v-model="form.verifyPass" show-password></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="code">
                    <el-input v-model="form.code">
                        <span slot="suffix" @click="getCode" class="suffixCon">获取验证码<a v-if="codeBo">(@{{codeTime}}s)</a></span>
                    </el-input>
                </el-form-item>
            </el-form>
            <!-- 用户详细信息注册 -->
            <el-form v-show="activeBo==1 && next==2" :rules="rule2" :model="form2" label-position="top" size="mini" ref="form2">
                <el-form-item prop="name" label="姓名">
                    <el-input v-model="form2.name"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="form2.sex" size="mini">
                        <el-radio label="1" border>男</el-radio>
                        <el-radio label="2" border>女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="form2.email"></el-input>
                </el-form-item>
                <el-form-item label="公司名称" prop="companyName">
                    <el-input v-model="form2.companyName"></el-input>
                </el-form-item>
                <el-form-item label="部门" prop="department">
                    <el-input v-model="form2.department"></el-input>
                </el-form-item>
                <el-form-item label="职位" prop="post">
                    <el-input v-model="form2.post"></el-input>
                </el-form-item>
                <el-form-item label="公司类型" prop="companyType">
                    <el-select v-model="form2.companyType" filterable clearable>
                        <el-option v-for="item in companyTypeData" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="公司行业" prop="companyIndustry">
                    <el-select v-model="form2.companyIndustry" filterable clearable>
                        <el-option v-for="item in companyIndustryData" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="员工人数" prop="companyEmployees">
                    <el-select v-model="form2.companyEmployees" filterable clearable>
                        <el-option v-for="item in companyEmployeesData" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="HR部门人数" prop="HREmployees">
                    <el-select v-model="form2.HREmployees" filterable clearable>
                        <el-option v-for="item in HREmployeesData" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <!-- 供应商注册 -->
            <el-form v-show="activeBo==2 && next==1" :rules="rule3" :model="form3" label-position="top" size="mini" ref="form3">
                <el-form-item prop="tel" label="手机号">
                    <el-input v-model="form3.tel"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="form3.password" show-password></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="verifyPass">
                    <el-input v-model="form3.verifyPass" show-password></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="code">
                    <el-input v-model="form3.code">
                        <span slot="suffix" @click="getCode" class="suffixCon">获取验证码<a v-if="codeBo">(@{{codeTime}}s)</a></span>
                    </el-input>
                </el-form-item>
                <el-form-item label="上传认证资料" prop="fileList">
                    <div style="width:3.2rem;    margin-left: -25%;">
                        <el-upload class="upload-demo" drag :on-remove="handleRemove" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :action="uploadUrl" multiple>
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                            <div class="el-upload__tip" slot="tip">只能上传pdf/word件</div>
                        </el-upload>
                    </div>
                </el-form-item>
            </el-form>
            <!-- 供应商详细信息注册 -->
            <el-form v-show="activeBo==2 && next==2" :rules="rule4" :model="form4" label-position="top" size="mini" ref="form4">
                <el-form-item prop="companyName" label="公司名称">
                    <el-input v-model="form4.companyName"></el-input>
                </el-form-item>
                <el-form-item label="公司邮箱" prop="companyEmail">
                    <el-input v-model="form4.companyEmail"></el-input>
                </el-form-item>
                <el-form-item label="公司电话" prop="companyTel">
                    <el-input v-model="form4.companyTel"></el-input>
                </el-form-item>
                <el-form-item label="负责人姓名" prop="name">
                    <el-input v-model="form4.name"></el-input>
                </el-form-item>
                <el-form-item label="负责人电话" prop="usertel">
                    <el-input v-model="form4.usertel"></el-input>
                </el-form-item>
                <el-form-item label="负责人职位" prop="post">
                    <el-input v-model="form4.post"></el-input>
                </el-form-item>
                <el-form-item label="公司类型" prop="companyType">
                    <el-select v-model="form4.companyType" filterable clearable>
                        <el-option v-for="item in companyTypeData" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="公司行业" prop="companyIndustry">
                    <el-select v-model="form4.companyIndustry" filterable clearable>
                        <el-option v-for="item in companyIndustryData" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="员工人数" prop="companyEmployees">
                    <el-select v-model="form4.companyEmployees" filterable clearable>
                        <el-option v-for="item in companyEmployeesData" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <!-- 阅读服务条款 -->
            <div class="remenberPass" v-if=" next==1" @click="remenberPass">
                <span :class="{active:remenberBo}">
                    <img src="{{URL::asset('./img/login/remenber.png')}}" v-if="remenberBo">
                </span><a>我已阅读并同意《<span>用户服务协议</span>》服务条款</a>
            </div>
            <!-- 提交下一步 -->
            <el-button v-if="next==1" :disable="remenberBo" class="submit" :loading="submitBo" @click="submitForm(activeBo==1?'form':'form3')">
                下一步
            </el-button>
            <!-- 确认注册 -->
            <el-button v-else class="submit" :loading="submitBo" @click="submitForm(activeBo==1?'form2':'form4')">
                @{{activeBo==1?'确认注册':'提交注册审核'}}
            </el-button>
        </div>
        <div class="forgetRegister" v-if="next==1">
            <div>
                已有账号？
                &nbsp;&nbsp;<a target="_blank" href="{{ route('home.login.login') }}">
                    立即登录
                </a>
            </div>
        </div>
    </div>
</div>

<script src="{{ asset('js/vue.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/element.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/moment.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/bootstrap.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/public.js') }}" type="text/javascript"></script>
<script>
    $(() => {
        let app = new Vue({
            el: '#login',
            data() {
                var validateTel = (rule, value, callback) => {
                    var reg = /^((13|14|15|16|17|18|19)[0-9]\d{8})$/;
                    if (value == '') {
                        callback(new Error('请输入联系电话'));
                    } else if (!reg.test(value)) {
                        callback(new Error('请输入正确的联系电话!'));
                    } else {
                        callback();
                    }
                };
                var validatePass2 = (rule, value, callback) => {
                    if (value == '') {
                        callback(new Error('请再次输入密码'));
                    } else if (value != this.form.password) {
                        callback(new Error('两次输入密码不一致!'));
                    } else {
                        callback();
                    }
                };
                var validatePass3 = (rule, value, callback) => {
                    if (value == '') {
                        callback(new Error('请再次输入密码'));
                    } else if (value != this.form3.password) {
                        callback(new Error('两次输入密码不一致!'));
                    } else {
                        callback();
                    }
                };
                return {
                    overall: "",
                    activeBo: 1,
                    uploadUrl: UPLOAD_FILE,
                    stepOne: 0,
                    form: {
                        tel: "",
                        password: '',
                        verifyPass: '',
                        code: ''
                    },
                    form2: {
                        name: '',
                        sex: '1',
                        email: '',
                        companyName: '',
                        department: '',
                        post: '',
                        companyType: '',
                        companyIndustry: '',
                        companyEmployees: '',
                        HREmployees: '',
                    },
                    form3: {
                        tel: "",
                        password: '',
                        verifyPass: '',
                        code: '',
                        fileList: []
                    },

                    form4: {
                        companyName: '',
                        companyEmail: '',
                        companyTel: '',
                        name: '',
                        usertel: '',
                        post: '',
                        companyType: '',
                        companyIndustry: '',
                        companyEmployees: '',
                    },
                    next: 1,
                    rule1: {
                        tel: [{
                            required: true,
                            validator: validateTel,
                            trigger: 'blur'
                        }],
                        password: [{
                            required: true,
                            message: '密码不能为空',
                            trigger: 'blur'
                        }],
                        verifyPass: [{
                            required: true,
                            validator: validatePass2,
                            trigger: 'blur'
                        }],
                        code: [{
                            required: true,
                            message: '验证码不能为空',
                            trigger: 'blur'
                        }],
                    },
                    rule2: {
                        name: [{
                            required: true,
                            message: '姓名不能为空',
                            trigger: 'blur'
                        }],
                        sex: [{
                            required: true,
                            message: '请选择性别',
                            trigger: 'blur'
                        }],
                        email: [{
                            required: true,
                            validator: validateEmail,
                            trigger: 'blur'
                        }],
                        companyName: [{
                            required: true,
                            message: '公司名称不能为空',
                            trigger: 'blur'
                        }],
                        department: [{
                            required: true,
                            message: '部门不能为空',
                            trigger: 'blur'
                        }],
                        post: [{
                            required: true,
                            message: '职位不能为空',
                            trigger: 'blur'
                        }],
                        companyType: {
                            required: true,
                            message: '公司类型不能为空',
                            trigger: 'change'
                        },
                        companyIndustry: {
                            required: true,
                            message: '公司行业不能为空',
                            trigger: 'change'
                        },
                        companyEmployees: {
                            required: true,
                            message: '员工人数不能为空',
                            trigger: 'change'
                        },
                        HREmployees: {
                            required: true,
                            message: 'HR部门人数不能为空',
                            trigger: 'change'
                        },
                    },
                    rule3: {
                        tel: {
                            required: true,
                            validator: validateTel,
                            trigger: 'blur'
                        },
                        password: [{
                            required: true,
                            message: '密码不能为空',
                            trigger: 'blur'
                        }],
                        verifyPass: [{
                            required: true,
                            validator: validatePass3,
                            trigger: 'blur'
                        }],
                        code: [{
                            required: true,
                            message: '验证码不能为空',
                            trigger: 'blur'
                        }],
                        fileList: [{
                            required: true,
                            message: '请选择文件',
                            trigger: 'blur'
                        }],
                    },
                    rule4: {
                        companyName: [{
                            required: true,
                            message: '公司名称不能为空',
                            trigger: 'blur'
                        }],
                        companyEmail: [{
                            required: true,
                            validator: validateEmail,
                            trigger: 'blur'
                        }],
                        companyTel: [{
                            required: true,
                            message: '公司电话不能为空',
                            trigger: 'blur'
                        }],
                        name: [{
                            required: true,
                            message: '负责人姓名不能为空',
                            trigger: 'blur'
                        }],
                        usertel: {
                            required: true,
                            validator: validateTel,
                            trigger: 'blur'
                        },
                        post: [{
                            required: true,
                            message: '负责人职位不能为空',
                            trigger: 'blur'
                        }],
                        
                        companyType:   { required: true, message: '公司类型不能为空', trigger: 'change' },
                        companyIndustry: {
                            required: true,
                            message: '公司行业不能为空',
                            trigger: 'change'
                        },
                        companyEmployees: {
                            required: true,
                            message: '员工人数不能为空',
                            trigger: 'change'
                        },
                    },
                    remenberBo: false,
                    codeTime: 60,
                    submitBo: false,
                    codeBo: false,
                    companyTypeData: [],
                    companyIndustryData: [],
                    companyEmployeesData: [],
                    HREmployeesData: [],

                }
            },
            created() {
                window.$message = (res) => {
                    this.$message({
                        message: res,
                        type: 'error'
                    });
                }
                $.get("{{ route('home.public.config') }}", (res) => {
                    sessionStorage.setItem("overall", JSON.stringify(res.data))
                    this.overall = res.data
                });
                //公司类型
                apiAjax("{{ route('home.public.companys') }}", 'get', {
                    type: 1
                }, (res) => {
                    this.companyTypeData = res.data;
                });
                //公司行业
                apiAjax("{{ route('home.public.companys') }}", 'get', {
                    type: 2
                }, (res) => {
                    this.companyIndustryData = res.data;
                });
                //公司规模（员工人数）
                apiAjax("{{ route('home.public.companys') }}", 'get', {
                    type: 3
                }, (res) => {
                    this.companyEmployeesData = res.data;
                });
                //HR部门人数
                apiAjax("{{ route('home.public.companys') }}", 'get', {
                    type: 4
                }, (res) => {
                    this.HREmployeesData = res.data;
                });
            },
            methods: {
                setActiveBo(num) {
                    if (this.submitBo) {} else {
                        this.activeBo = num;
                        this.stepOne = 0;
                        this.next = 1;
                        this.$nextTick(() => {
                            if (this.$refs['form']) {
                                this.$refs['form'].resetFields();
                            }
                            if (this.$refs['form3']) {
                                this.$refs['form3'].resetFields();
                            }
                            if (this.$refs['form2']) {
                                this.form2.sex = '1'
                                this.$refs['form2'].resetFields();
                            }
                            if (this.$refs['form4']) {
                                this.$refs['form4'].resetFields();
                            }
                        })
                    }
                },
                remenberPass() {
                    this.remenberBo = !this.remenberBo;
                },
                getCode() {
                    if (this.codeTime == 60) {
                        $.get("{{ route('home.public.config') }}", (res) => {
                            this.codeBo = true
                            let a = setInterval(() => {
                                this.codeTime -= 1;
                                if (this.codeTime == 0) {
                                    this.codeBo = false;
                                    this.codeTime = 60;
                                    clearInterval(a)
                                }
                            }, 1000);
                        });
                    }
                },
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            if (this.remenberBo) {
                                this.submitBo = true;
                                //用户注册
                                if (this.activeBo == 1) {
                                    // 第一步
                                    if (this.next == 1) {
                                        let data = {
                                            mobile: this.form.tel,
                                            password: this.form.password,
                                            confirmc_pass: this.form.verifyPass,
                                        }
                                        apiAjax("{{ route('home.register.hrStep1') }}", 'post', data, (res) => {
                                            this.submitBo = false;
                                            if (res.code == 0) {
                                                this.next = 2;
                                                this.stepOne = res.data;
                                            } else {
                                                this.$message({
                                                    message: res.msg,
                                                    type: 'warning'
                                                });
                                            }
                                        }, (erro) => {
                                            this.submitBo = false;
                                        })
                                        // 第二步
                                    } else if (this.next == 2) {
                                        let data = {
                                            tid: this.stepOne,
                                            username: this.form2.name,
                                            email: this.form2.email,
                                            sex: this.form2.sex,
                                            company_name: this.form2.companyName,
                                            hr_department: this.form2.department,
                                            hr_position: this.form2.post,
                                            company_type: this.form2.companyType,
                                            company_industry: this.form2.companyIndustry,
                                            company_size: this.form2.companyEmployees,
                                            hr_size: this.form2.HREmployees,
                                        }
                                        apiAjax("{{ route('home.register.hrStep2') }}", 'post', data, (res) => {
                                            this.submitBo = false;
                                            if (res.code == 0) {
                                                this.next = 2;
                                                this.$message({
                                                    message: "注册成功",
                                                    type: 'success'
                                                });
                                                window.location.href = "{{ route('home.login.login') }}";
                                            } else {
                                                this.$message({
                                                    message: res.msg,
                                                    type: 'warning'
                                                });
                                            }
                                        }, (erro) => {
                                            this.submitBo = false;

                                        })
                                    }
                                    //供应商注册
                                } else if (this.activeBo == 2) {
                                    //第一步
                                    if (this.next == 1) {
                                        let data = {
                                            mobile: this.form3.tel,
                                            password: this.form3.password,
                                            confirmc_pass: this.form3.verifyPass,
                                            certification: this.form3.fileList,
                                        }
                                        apiAjax("{{ route('home.register.supplierStep1') }}", 'post', data, (res) => {
                                            this.submitBo = false;
                                            if (res.code == 0) {
                                                this.next = 2;
                                                this.stepOne = res.data;
                                            } else {
                                                this.$message({
                                                    message: res.msg,
                                                    type: 'warning'
                                                });
                                            }
                                        }, (erro) => {
                                            this.submitBo = false;
                                        })
                                        //第二步
                                    } else if (this.next == 2) {
                                        let data = {
                                            tid: this.stepOne,
                                            company_name: this.form4.companyName,
                                            company_email: this.form4.companyEmail,
                                            company_phone: this.form4.companyTel,
                                            master_name: this.form4.name,
                                            master_phone: this.form4.usertel,
                                            master_position: this.form4.post,
                                            company_type: this.form4.companyType,
                                            company_industry: this.form4.companyIndustry,
                                            company_size: this.form4.companyEmployees,
                                        }
                                        apiAjax("{{ route('home.register.supplierStep2') }}", 'post', data, (res) => {
                                            this.submitBo = false;
                                            if (res.code == 0) {
                                                this.next = 2;
                                                this.$message({
                                                    message: "注册成功",
                                                    type: 'success'
                                                });
                                                window.location.href = "{{ route('home.login.login') }}";
                                            } else {
                                                this.$message({
                                                    message: res.msg,
                                                    type: 'warning'
                                                });
                                            }
                                        }, (erro) => {
                                            this.submitBo = false;

                                        })
                                    }
                                }

                            } else {
                                this.$message({
                                    message: '请阅读用户协议',
                                    type: 'warning'
                                });
                            }

                        } else {
                            return false;
                        }
                    });


                },


                beforeAvatarUpload(file) {
                    const type = file.name.split('.')[1];
                    const isJPG = type == 'doc' || type == 'docx' || type == 'pdf';
                    // const isJPG = file.type == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ||
                    //     file.type == 'pdf';

                    if (!isJPG) {
                        this.$message.error('上传文件只能是PDF和word!');
                    }
                    return isJPG;
                },
                handleAvatarSuccess(res, file) {
                    this.form3.fileList.push(res.data.path)
                },
                handleRemove(file, fileList) {
                    this.form3.fileList = [];
                    fileList.forEach(element => {
                        this.form3.fileList.push(element.response.data.path)
                    });
                },
            }

        })
    })
</script>